//
// Image Box
//
.elementor-widget-image-box {

	.elementor-image-box-content {
		width: 100%; // Hack for Chrome in flex mode
	}

	@media (min-width: $screen-mobile-next) {

		&.elementor-position- {

			&left, &right {

				.elementor-image-box-wrapper {
					display: flex;
				}
			}

			&right {

				.elementor-image-box-wrapper {
					text-align: end;
					flex-direction: row-reverse;

					[dir="rtl"] & { // BC for RTL direction.
						flex-direction: row;
					}
				}
			}

			&left {

				.elementor-image-box-wrapper {
					text-align: start;
					flex-direction: row;

					[dir="rtl"] & { // BC for RTL direction.
						flex-direction: row-reverse;
					}
				}
			}

			&top {

				.elementor-image-box-img {
					margin: auto;
				}
			}
		}

		&.elementor-vertical-align- {

			&top {

				.elementor-image-box-wrapper {
					align-items: flex-start;
				}
			}

			&middle {

				.elementor-image-box-wrapper {
					align-items: center;
				}
			}

			&bottom {

				.elementor-image-box-wrapper {
					align-items: flex-end;
				}
			}
		}
	}

	@media (max-width: $screen-mobile-max) {

		// TEMP code to override the image spacing
		.elementor-image-box-img {
			margin-inline: auto !important;
			margin-bottom: 15px;
		}
	}

	.elementor-image-box-img {
		display: inline-block; // For alignment content

		img {
			display: block;
			line-height: 0;
		}
	}

	.elementor-image-box-title {

		a {
			color: inherit;
		}
	}

	.elementor-image-box-wrapper {
		text-align: center;
	}

	.elementor-image-box-description {
		margin: 0;
	}
}
